Reactアプリをローカルで起動するとタイムトラベラー呼ばわりされたので対処する

#React

#CSS

若槻龍太

2021.08.17

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、CX事業本部 IoT事業部の若槻です。

Greetings, time traveller ???

開発中のReactアプリケーションをローカル環境（localhost）で起動すると、下記のように警告が出ていました。

./src/index.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/index.css)
Warning

Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.

./src/App.css (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-4-1!./node_modules/postcss-loader/src??postcss!./src/App.css)
Warning

Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.

CSSファイルの./src/index.cssと./src/App.cssに対して、Greetings, time traveller. We are in the golden age of prefix-less CSS, where Autoprefixer is no longer needed for your stylesheet.という警告が出ています。

ちなみに同じコードをサーバー（AWS）にデプロイした上でアクセスするとこの警告は出ません。

CSSがプレフィクスレス？

警告文を翻訳したのが次の文です。

ご挨拶、タイムトラベラー。私たちはプレフィックスのないCSSの黄金時代にあり、スタイルシートにAutoprefixerは不要になりました。

洒落っ気のある文章ですが、とても分かりづらいです。プレフィックスとAutoprefixerというのがキーワードのようです。それぞれについて調べてみます。

まずプレフィクスについてはベンダープレフィックスのことを指しているようです。

Vendor Prefix (ベンダー接頭辞) - MDN Web Docs 用語集: ウェブ関連用語の定義 | MDN

ブラウザベンダーは試験的に提供したいCSSプロパティに下記のベンダープレフィックスを付けることにより、標準のプロパティと区別するようにしています。

-webkit- (Chrome, Safari, 新しいバージョンの Opera, ほぼすべての iOS ブラウザー (Firefox for iOS を含む)。基本的に WebKit ベースのブラウザーすべて)
-moz- (Firefox)
-o- (WebKit 導入前の古い Opera)
-ms- (Internet Explorer と Microsoft Edge)

使用例:

-webkit-transition: all 4s ease;
-moz-transition: all 4s ease;
-ms-transition: all 4s ease;
-o-transition: all 4s ease;
transition: all 4s ease;

一方Autoprefixerとは、CSSのプロパティを一つ書けば他のVendor Prefix付きのプロパティも自動で追加してくれるライブラリとのことです。

postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use

ここまで確認できたところでもう一度警告文を見てみます。

ご挨拶、タイムトラベラー。私たちはプレフィックスのないCSSの黄金時代にあり、スタイルシートにAutoprefixerは不要になりました。

すると今度は「今回のアプリを起動した環境ではCSSにはプレフィクスが不要であるため、Autoprefixerも不要」というのがなんとなく読み取れますね。

また、そもそもとしてブラウザベンダーはベンダープレフィックスを使用しないようになってきているようです。だからベンダープレフィックス（Autoprefixer）を使用するとタイムトラベラー（時代遅れ）呼ばわりしているんですね。

対処してみる

有効だった方法

結論としては、package.jsonでdevelopmentのbrowserslistをproductionと同じ指定とすれば解決できました。

/javascript

$ git diff package.json
diff --git a/package.json b/package.json
index 30e0b6e..db83d56 100644
--- a/package.json
+++ b/package.json
@@ -42,9 +42,9 @@
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
     "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
     ]
   },

browserslistではアプリケーションのターゲットブラウザを設定します。（指定の意味は下記参照）

browserslist - npm

アプリのローカル起動時（react-scripts start実行時）はbrowserslistのdevelopmentの値を参照するようです。しかし使用していたGoogle Chromeは最新版であるにも関わらずlast 1 chrome versionとあるのに警告が出るのはよく分からなかったです。